<template>
    <div>
        地址：<el-input placeholder="请输入内容" v-model="dizhi" clearable style="width: 200px;">

    </el-input>
        运营商名字：<el-input placeholder="请输入内容" v-model="yysname" clearable style="width: 200px;">
    </el-input>
            时间： <el-date-picker
                v-model="time"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="verification">查询</el-button>
        <div>
            <!--表格-->
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        :index="indexMethod"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="vmid"
                        label="售货机id"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="vmSite"
                        label="售货机地址"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="vmState"
                        label="售货机状态"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="售货机申请时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="operatorName"
                        label="运营商"
                        width="150">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">通过
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=page
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size=size
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'VendingMachine',
        mounted() {//默认第一次加载
            initTable(this)
        },
        data () {
            return {
                pickerOptions: {
                    disabledDate (time) {
                        return time.getTime() > Date.now()
                    }
                },
                time: '',
                tableData: [],
                total: 0,
                page: 1,
                size: 5,
                subForm:{
                    startTime:'',
                    overTime:'',
                },
                options: [{
                    value: '禁用',
                    label: '禁用'
                }, {
                    value: '启用',
                    label: '启用'
                }],
                value: '',
                dizhi: '',
                yysname: '',
            }
        },
        methods: {

            //以下是表格部分的方法
            indexMethod(index) {
                return index + 1
            },
            handleSizeChange(val) {
                this.size = val
                initTable(this)
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.page = val
                initTable(this)
                console.log(`当前页: ${val}`)
            },
            verification:function () {
                this.$axios.post("vmglcx", {
                    // page: this.page,
                    // size: this.size,
                    operatorName: this.yysname,
                    time: this.time,
                    vmSite: this.dizhi
                }).then(resp => {
                    if (resp) {
                        this.$message({
                            type: 'success',
                            message: '查询成功!'
                        })
                        this.tableData = resp.data.tbVmiLi
                        this.total = resp.data.count
                    }
                })
            },
            handleDelete(index,row){
                alert(row.vmid)
                this.$confirm('是否通过申请','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type: 'warning'
                }).then(()=>{
                    this.$axios.post("vmtg",{
                        vmid:row.vmid
                    }).then(resp =>{
                        if (resp=true){
                            this.$message({
                                type: 'success',
                                message: '通过成功!'
                            })
                            initTable(this)
                        }
                    })

                })
            }
        },
    }
    function initTable($this) {
        $this.$axios.post("VMGL", {
            page: $this.page,
            size: $this.size
        }).then(resp => {
            if (resp) {
                $this.tableData = resp.data.vmiList
                $this.total = resp.data.count
            }
        })
    }
</script>

<style scoped>

</style>
